<!DOCTYPE html>
<html lang="zh-CN">

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
      * {
         padding: 0;
         margin: 0;
      }

      .container {
         width: 100%;
         height: 100vh;
         background: url(./bg.png) no-repeat;
         background-size: cover;
      }

      .box {
         width: 1920px;
         height: 1080px;
         background-color: red;
         transform-origin: left top;
         position: fixed;
         left: 50%;
         top: 50%;
      }

      .top {
         width: 100px;
         height: 100px;
         background-color: pink;
         margin-left: 50px;
      }

      .bottom {
         width: 100px;
         height: 100px;
         background-color: pink;
         margin-left: 50px;
         margin-top: 100px;
      }
   </style>
</head>

<body>
   <div class="container">
      <!-- 数据展示区域 -->
      <div class="box">
         <div class="top">我是祖国的</div>
         <div class="bottom">花朵</div>
      </div>
   </div>
</body>

</html>
<script>
   // 用js控制数据大屏的放大与缩小
   let box = document.querySelector('.box')

   box.style.transform = `scale(${getScale()}) translate(-50%,-50%)`

   // 计算缩放比例
   function getScale(w = 1920, h = 1080) {
      const ww = window.innerWidth / w
      const wh = window.innerHeight / h
      return ww < wh ? ww : wh
   }
   window.onresize = () => {
      box.style.transform = `scale(${getScale()}) translate(-50%,-50%)`
   }
</script>